<template>
  <input v-model="btnTheme" type="checkbox" value="error" /> error
  <input v-model="btnTheme" type="checkbox" value="flat" /> flat
  <br />
  <br />
  <!-- 直接使用数组数据源，数组中有哪些值，直接在该元素的class里出现对应的类名 -->
  <button :class="btnTheme">我是一个普通的按钮</button>

  <hr />
  <input v-model="capsule" type="checkbox" /> 胶囊
  <input v-model="widthTheme" type="checkbox" value="fullWidth" /> 块
  <br />
  <br />
  <!-- 数组和对象一起使用 -->
  <button :class="[{ rounded: capsule }, widthTheme]">我是一个普通的按钮</button>
</template>

<script setup>
import { ref } from 'vue'

let btnTheme = ref([]) // 按钮class数组
let capsule = ref(false) // 胶囊
let widthTheme = ref([]) // 宽度数组
</script>

<script>
export default {
  data: () => ({
    btnTheme: [], // 按钮class数组
    capsule: false, // 胶囊
    widthTheme: [], // 宽度数组
  }),
}
</script>

<style scoped>
button {
  border: none;
  padding: 15px 20px;
  background-color: rgb(179, 175, 175);
}

.error {
  background-color: rgb(167, 58, 58);
  color: white;
}

.flat {
  box-shadow: 0 0 8px gray;
}

.rounded {
  border-radius: 100px;
}

.fullWidth {
  width: 100%;
}
</style>
